<template>
  <!--  <div class="nav">
    <ul>
      <li v-for="(item, index) in optionList" :key="index">
        {{ index + 1 + '' + item.title?.text }}
      </li>
    </ul>
  </div>-->
  <div class="main">
    <div v-for="(item, index) in optionList" :key="index" class="item">
      <div>{{ item.title?.text || index }}</div>
      <Echarts :options="item" :width="'100%'" :height="'200px'" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import Echarts from '@/components/echarts/Echarts.vue'
import { options } from '@/components/echarts/options'
import { ECBasicOption } from 'echarts/types/dist/shared'
const optionList = reactive<Array<ECBasicOption>>([options[0]])
</script>

<style scoped lang="scss">
div {
  width: 100%;
  height: auto;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav {
  background: white;
  cursor: pointer;
  position: fixed;
  top: 0%;
  z-index: 100;
  ul {
    list-style: none;
    display: flex;
    li {
      margin: 5px;
    }
  }
}
</style>
